<template>
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="400">
    <el-form
      ref="formRef"
      :inline="false"
      :model="formData"
      :rules="rules"
      class="demo-form-inline"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="地点名" prop="locationName">
            <el-input
              v-model="formData.locationName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="btn_group">
          <el-button @click="onCancel">取消</el-button>
          <el-button type="primary" @click="onApply">确定</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits, reactive, ref, computed, watch } from "vue";
import { createLocation, updateLocation } from "@/network/api";
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  param: {
    type: Object,
    default: null,
  },
});

const emits = defineEmits(["update:show", "refresh"]);
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(val) {
    emits("update:show", val);
  },
});

const dialogTitle = computed(() => {
  return props.param?.type === "addSub"
    ? "增加子节点"
    : props.param?.type === "editNode"
    ? "修改地点"
    : "增加地点";
});

watch(dialogVisible, (value) => {
  if (value) {
    switch (props.param.type) {
      case "addNode": {
        resetForm();
        break;
      }
      case "editNode": {
        resetForm();
        formData.locationName = props.param.locationName;
        formData.exactId = props.param.exactId;
        break;
      }
      case "addSub": {
        resetForm();
        formData.parentId = props.param.parentId;
        break;
      }
    }
  }
});

const formRef = ref();
const rules = reactive({
  locationName: [
    { required: true, message: "请输入地点名称", trigger: "blur" },
  ],
});

const formData = reactive({
  locationName: "",
  exactId: "",
  parentId: "",
});

const resetForm = () => {
  formData.locationName = "";
  formData.exactId = "";
  formData.parentId = "";
};

const onCancel = () => {
  resetForm();
  emits("update:show", false);
};
const onApply = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      if (props.param.type === "editNode") {
        updateLocation({
          id: formData.exactId,
          locationName: formData.locationName,
        }).then((res) => {
          if (res?.code === 200) {
            ElMessage({
              message: "edit success",
              type: "success",
            });

            resetForm();
            emits("update:show", false);
            emits("refresh", true);
          } else {
            ElMessage({
              message: "edit faild",
              type: "error",
            });
          }
        });
      } else {
        createLocation({
          locationName: formData.locationName,
          parentId: props.param.type === "addNode" ? null : formData.parentId,
        }).then((res) => {
          if (res?.code === 200) {
            ElMessage({
              message: "add success",
              type: "success",
            });

            resetForm();
            emits("update:show", false);
            emits("refresh", true);
          } else {
            ElMessage({
              message: "add faild",
              type: "error",
            });
          }
        });
      }
    }
  });
};
</script>
<style lang="scss" scoped>
.btn_group {
  text-align: center;
}
</style>
